<template>
  <div class="login">
    <div class="box">
      <h1> vue3后台管理系统<el-icon><Avatar /></el-icon></h1>
      <!-- form表单 -->
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
          <el-input v-model="ruleForm.username" />
          <el-input v-model="ruleForm.password" />
      </el-form>
      <button class="loginbtn" @click="add">登录</button>
    </div>
  </div>
</template>
<script setup>
import { Avatar, Unlock } from "@element-plus/icons-vue";
import {ref,reactive} from 'vue'
const formSize = ref('default')
const ruleForm =reactive({
    username: "admin",
    password: "123456",
})
const add = () =>{ //点击登陆

}
components: {
  Avatar;
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: skyblue;
  overflow: hidden;
  .box {
    position: relative; //相对定位
    width: 600px;
    height: 400px;
    background-color: springgreen;
    margin: 150px auto;
    h1{
     text-align: center;
     position: absolute; //绝对定位
     top: 50px;
     left: 150px;
    }
    .el-form{
      position: absolute;
      top: 130px;
      left: 100px;
      .el-input{
        height: 40px;
        margin: 20px 0;
      }
    }
    .loginbtn{
      position: absolute;
      top: 300px;
      left: 100px;
      height: 40px;
      width:400px ;
      background-color: #626aef;
      color: #fff;
      text-align: center;
      border: 0;
      border-radius: 5px;
    }
  }
}
</style>